<template>
  <div class="login">
    <div>
      <LoginHeader>
        <div slot="content">
          <el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="ruleForm.username" prefix-icon="iconfont icon-users"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psd">
              <el-input
                type="password"
                v-model="ruleForm.pwd"
                prefix-icon="iconfont icon-suoding"
                show-password
              ></el-input>
            </el-form-item>
            <el-button
              type="primary"
              style="width: 100%;"
              @click.native.prevent="handleLogin"
              :loading="loading"
            >登录</el-button>
            <div class="footeldiv">
              <el-checkbox v-model="ruleForm.autoLogin">七天自动登录</el-checkbox>
              <div class="forget" @click="$router.push('/password')">忘记密码</div>
            </div>
          </el-form>
        </div>
      </LoginHeader>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator"
import { State, Getter, Mutation, Action } from "vuex-class"
import LoginHeader from "@/components/LoginHeader.vue"
import app from "@/utils/url"
@Component({
  components: { LoginHeader }//组件的注册
})
export default class Login extends Vue {
  @Action('setUser') setUser: any;
  @Provide() loading: Boolean = false;//登录加载状态
  @Provide() ruleForm: {//装饰器，存储数据
    username: String;
    pwd: String;
    autoLogin: Boolean;//七天免登录
  } = {
      username: 'admin',
      pwd: '123456',
      autoLogin: true
    };
  // @Provide() checked: Boolean=true
  @Provide() rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    pwd: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
    ]
  };
  //登录
  handleLogin() {
    this.loading = true;
    //this.$refs.ruleForm是一个对象，必须执行类型
    (this.$refs.ruleForm as any).validate((validate: Boolean) => {
      if (validate) {

        (this as any).$axios.post(app.login, this.ruleForm).then((res: any) => {
          if (res.status == 200) {
            this.loading = false;
            this.$message.success('登录成功')
            this.$router.push('/home')
            // this.$router.push({ path: '/home', query: { id: res.data.token } })//路由传参
            //存储token
            localStorage.setItem('tsToken', res.data.token)
            //存储到vuex中
            this.setUser(res.data)
          }
        }).catch((err: any) => console.log(err)
        )
      }
    })
  }
}
</script>

<style lang="scss">
.login {
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  width: 500px;
  height: auto;
  background-color: #fff;
  box-shadow: 0px 0px 9px #000;
  border-radius: 10px;
  padding: 30px;
  .el-form-item {
    .el-form-item__label {
      padding: 0 50px 0 0;
    }
  }
  .footeldiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0;
    .forget {
      color: #66b1ff;
      font-size: 14px;
    }
  }
}
</style>